<template>
  <div class="servers-page">
    <div class="page-header">
      <h1>服务器管理</h1>
      <el-button type="primary" :icon="Plus" @click="showAddDialog = true">
        添加服务器
      </el-button>
    </div>

    <div class="servers-content">
      <el-table :data="serversStore.servers" style="width: 100%">
        <el-table-column prop="name" label="名称" width="180" />
        <el-table-column prop="host" label="主机地址" width="180" />
        <el-table-column prop="port" label="端口" width="100" />
        <el-table-column prop="username" label="用户名" width="120" />
        <el-table-column prop="auth_type" label="认证方式" width="120">
          <template #default="{ row }">
            <el-tag :type="row.auth_type === 'password' ? 'primary' : 'success'">
              {{ row.auth_type === 'password' ? '密码' : '密钥' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="group_name" label="分组" width="120" />
        <el-table-column label="操作" fixed="right" width="200">
          <template #default="{ row }">
            <el-button size="small" @click="connectServer(row)">连接</el-button>
            <el-button size="small" type="primary" :icon="Edit" @click="editServer(row)" />
            <el-button size="small" type="danger" :icon="Delete" @click="deleteServer(row)" />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useServersStore } from '@/stores/servers'
import { Plus, Edit, Delete } from '@element-plus/icons-vue'

const router = useRouter()
const serversStore = useServersStore()

const connectServer = (server) => {
  router.push(`/terminal/${server.id}`)
}

const editServer = (server) => {
  // TODO: 实现编辑功能
  console.log('编辑服务器:', server)
}

const deleteServer = (server) => {
  // TODO: 实现删除功能
  console.log('删除服务器:', server)
}

onMounted(() => {
  serversStore.fetchServers()
})
</script>

<style scoped>
.servers-page {
  padding: 30px;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.servers-content {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
}
</style>

